<style>
.my-bullet-active{
  color:#fff!important;
  background:#fff!important;
  opacity: 0.8!important;
}
</style>
<template>
  <div id="red_packet_wapper" v-if="redPacketState" >
     <!--轮播-->
     <div class="swiper-container swiper-red-packet" id="red_packet_pic">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for=" (key, index) in activityInfoModel">
              <img @tap="goLink(key)" style="width:100%;height:100%;" :src="key.picUrl"/>
            </div>
          
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination" ></div>
    </div>
     <!-- 关闭按钮 -->
    <img class="icon-jia red_packet_close" src="static/img/close_white.png" @tap="closeRedPacket"/>
  </div>
</template>
<script>
import axios from 'axios'
import mui from 'static/js/mui'
import Swiper from 'static/js/swiper'
import {checkJoin} from '@/publicApi/common'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      redPacketState: false,
      activityInfoModel: [],
      mask: {}
    }
  },
  methods:{
    closeRedPacket(){
      this.mask.close();
    },
    goLink(value){
      console.log(value)
      this.$emit('handleLink', value)
      this.mask.close();
    }
  },
  mounted() {
    let that = this
    // 是否跳弹窗
    if(!this.hasWindow){
      checkJoin({ "platform":"0C"}).then(function(res){
        that.activityInfoModel = res.activityInfoModel
        if(that.activityInfoModel.length !== 0){
          that.mask = mui.createMask( function() {
              that.redPacketState = false
            }
          );
          that.mask.show();//显示遮罩
          that.redPacketState = true;
          that.$nextTick(()=>{
            let that = this
            new Swiper ('.swiper-red-packet', {
                loop : false,
                autoplay:false,
      
                // 如果需要分页器
                pagination:{
                    el: '.swiper-pagination',
                    bulletActiveClass: 'my-bullet-active',
                    clickable: true,
                    //dynamicBullets: true
                },
                observer:true,
                observeParents:true,
                on:{
                    imagesReady: function(){
                      let wapper = document.getElementById('red_packet_wapper')
                      wapper.style.marginTop=(-wapper.offsetHeight / 2)+'px'
                    }
                }
            }) 
          })
        }
      })
      this.$store.dispatch('updateHasWindow', true)
    }
      //mySwiper.updateSize();
      ////console.log(mySwiper.slides[0].style)
      ////console.log(document.getElementsByClassName('elememt')[0].clientHeight)
      //this.height = { height: document.getElementsByClassName('elememt')[0].clientHeight+'px'}        
  },
  destroyed() {
    //this.mask.close();
  },
  computed: {
    ...mapGetters([
        'hasWindow'
    ])
  }
}
</script>
<style scoped>
@import '~static/css/swiper.css';
/* 下载弹窗 */
#red_packet_wapper{
  position: absolute;
  /*margin-left: 5%;
  margin-right: 5%;*/
  width: 100%;
  border-radius: 20px;
  z-index:999;
  top: 50%;
}

.red_packet_close{
  position: relative;
  margin-top:20px;
  width: 40px;
  height: 40px;
  left: 50%;
  margin-left: -20px;
  color: #fff;
  font-size:30px;
}
</style>
